<template>
    <div>
        <!-- 面包屑导航 -->
        <el-bread></el-bread>
        <!-- 添加按钮 -->
        <el-button @click='addInfo' plain class="btn" type="primary" size="small">添加</el-button>
        <!-- 列表 -->
        <v-list  @edit="edit"></v-list>
        <!-- 弹框 -->
        <v-dialog ref="dialogInfo" :info="info" @cancel = 'cancel'></v-dialog>
    </div>
</template>

<script>
import vList from './list.vue'
import vDialog from './dialog.vue'
export default {
    data() {
        return {
            info: {
                isShow: false,//用于控制弹框的显示隐藏
                isAdd: true,//判断是否是添加还是编辑
            }
        };
    },
    components: {
        vList,
        vDialog
    },
    methods: {
        addInfo() {
            // 打开弹框
            this.info.isShow = true
            // 告诉这是添加
            this.info.isAdd = true
        },
        cancel(e){
            this.info.isShow = e
        },
        edit(e){
            // 打开弹框
           this.info.isShow = true
            //告诉这是编辑
           this.info.isAdd = false
           this.$refs.dialogInfo.loop(e)
        }
    }
};
</script>

<style scoped>
.btn{
      margin: 10px 5px;
}
</style>
